<template>
	<view>
		<view class="bottom_tabbar">
			<view v-for="(item,index) in list" :key="index" @tap="changeTabbar(index)">
				<block v-if="index!=1">
					<text :class="tabbarIndex===index?'active':''">{{item.text}}</text>
					
				</block>
				<block v-else>
					<image class="code" :src="item.activeImg"></image>
				</block>
			</view>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '../Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		props: {
			tabbarIndex: 0
		},
		data() {
			return {
				tabbarValue: 0,
				list: [{
						inactiveImg: 'https://i.ringzle.com/file/20240110/21f78c60e1124be58ce600852e5cb19f.png',
						activeImg: 'https://i.ringzle.com/file/20240110/900d57df8c7b4b27b1f27c3b9f1218b1.png',
						text: '首页',
						path: '/pages/index/index2'
					},
					{
						inactiveImg: 'https://i.ringzle.com/file/20240110/ed49173b23b542eabbf124288b82a5e1.png',
						activeImg: 'https://i.ringzle.com/file/20240110/ed49173b23b542eabbf124288b82a5e1.png',
						text: '',
						path: '/pages/oneCodePass/index2'
					},
					{
						inactiveImg: 'https://i.ringzle.com/file/20240110/609ad46cc5c04762b287d375714958fd.png',
						activeImg: 'https://i.ringzle.com/file/20240110/8c466399711b490395988bbd312d5481.png',
						text: '我的',
						path: '/pages/my/index2'
					}
				],
				loginSuccessUrl:''
			}
		},
		mounted() {
			this.tabbarValue = this.tabbarIndex;
		},
		methods: {
			//登录成功后处理事件
			loginSuccess(res) {
				if(!this.loginSuccessUrl) return
				uni.reLaunch({
					url: this.loginSuccessUrl
				})
			},
			changeTabbar(e) {
				this.tabbarValue = e;
				uni.reLaunch({
					url: this.list[e].path
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.bottom_tabbar {
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		padding: 32rpx 0 60rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;

		&>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				&.code {
					width: 88rpx;
					height: 88rpx;
					min-height: 88rpx;
				}
			}

			text {
				line-height: 56rpx;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #999999;
				&.active{
					color: #007A69;
					position: relative;
					&::after{
						display: block;
						content: "";
						height: 8rpx;
						width: 100%;
						border-radius: 4.5rpx;
						background-color: #007A69;
						bottom: -14rpx;
						left:0;
						position: absolute;
					}
				}
			}
		}
	}
</style>